<template >
    <div id='home'>
        <!-- 轮播图 -->
        <mt-swipe :auto="4000" >
            <mt-swipe-item v-for='(item, index) in imgs' :key='index' >
                <img :src="item.img_src" alt=""/>
            </mt-swipe-item>
            
        </mt-swipe>
    </div>
</template>

<script>
export default {
    name: "Home",
    data(){
        return {
            imgs: []
        }
    },
    created(){
        console.log(this.$axios)
        this.$axios.get('swiperimg/', {headers: {
            'Access-Control-Allow-Origin': '*',

        }}).then(res=>{
            console.log(res.data.msg)
            this.imgs = res.data.msg
        }).catch(err=>{
            console.log('轮播图数据异常', err)
        })
    }
}
</script>


<style lang="css" scoped> /* scoped 表示只对当前组件样式起作用*/
.mint-swipe {
    height:30rem;
    width:100%;
    }
</style>